<template>
  <div v-if="courseData.length > 0">
    <van-card
      v-for="cs in courseData "
      :key="cs.courseSchedule.id"
      style="margin-top: 0.5rem;"
    >
      <template #title>
        <h3>
          {{ cs.courseSchedule.teachClassName }}
        </h3>
      </template>
      <template #desc>
        <p> {{ cs.courseSchedule.teachTimeName }} {{ cs.teachTime.startTime }}-{{ cs.teachTime.endTime }} </p>

      </template>
      <template #tags>
        <van-tag
          mark
          type="primary"
        >
          教室：{{ cs.courseSchedule.classroomName }}
        </van-tag>
        <van-tag
          mark
          type="warning"
          style="margin-left: 0.1rem;"
        >
          教师：{{ cs.courseSchedule.teacherName }}
        </van-tag>
        <van-tag
          mark
          type="success"
          style="margin-left: 0.1rem;"
        >
          人数：{{ cs.courseSchedule.expectedPeopleNum }}
        </van-tag>
      </template>
    </van-card>
  </div>
  <van-empty
    v-else
    description="今天没有课程~"
  />
</template>

<script>
import { Card, Empty, Tag } from 'vant'

export default {
  name: 'TodayCourse',
  components: {
    [Card.name]: Card,
    [Empty.name]: Empty,
    [Tag.name]: Tag
  },
  data () {
    return {
      courseData: []
    }
  },
  created () {
    this.$store.dispatch('courseTable/getTodayCourse').then((data) => {
      this.courseData = data
    })
  }
}
</script>

<style>
</style>
